<template>
	<view class="container" :style="{height: containerHeight+'px'}">
		<view class="mainPart">
			<view class="part1">
				<view class="avatarCard">
					<view class="title">
						头像
					</view>
					<view class="avatar" @click="updateAvatar">
						<image class="headImg" :src="newAvatar" mode="aspectFill"></image>
					</view>
				</view>
				<view class="infoCard" @click="popupControl.nickname = true">
					<view class="title">
						昵称
					</view>
					<view class="infoBox">
						{{info.nickname}}
					</view>
					<u-popup :round="30" :duration="200" 
						:show="popupControl.nickname" mode="center"  
						@close="popupControl.nickname = false" closeOnClickOverlay @cancel="popupControl.nickname = false">
						
						<view class="baseCardStyle" style="height: 500upx;">
							<view class="guide">
								修改昵称
							</view>
							<input class=""
								:placeholder="info.nickname"
								type="text"
								:adjust-position="false"
								v-model="newNickname">
								
							<view class="control">
								<view class="cancel" @click="cancelNickname()">取消</view>
								<view class="update" @click="updateNickname()">保存并退出</view>
							</view>
						</view>
					</u-popup>
				</view>
				<view class="infoCard" @click="popupControl.intro = true">
					<view class="title">
						简介
					</view>
					<view class="infoBox" 
							style=" display: -webkit-box;		
									word-wrap: break-all;
									word-break: normal;
									-webkit-line-clamp: 3;
									-webkit-box-orient: vertical;
									text-overflow: ellipsis;
									overflow: hidden;">
						{{info.introduce}}
					</view>
					<u-popup :duration="200" 
						:show="popupControl.intro" mode="center" 
						closeOnClickOverlay @cancel="popupControl.intro = false" 
						@close="popupControl.intro = false">
						
						<view class="baseCardStyle" style="height: 700upx; ">
							<view class="guide">
								修改简介
							</view>
							<u--textarea
								class="introArea"
								count
								:maxlength="140"
								v-model="newIntro" 
								autoHeight></u--textarea>
								
							<view class="control">
								<view class="cancel" @click="cancelIntro()">取消</view>
								<view class="update" @click="updateIntro()">保存并退出</view>
							</view>
						</view>
					</u-popup>
				</view>
				<view class="infoCard" @click="setSex(info.sex)">
					<view class="title">
						性别
					</view>
					<view class="infoBox">
						{{info.sex}}
					</view>
					<u-picker :show="select.sex" 
							  :columns="[['男','女']]" 
							  @confirm="confirmSex" @cancel="select.sex = false"  @close="select.sex = false"
							  :closeOnClickOverlay="true"></u-picker>
				</view>
				<view class="infoCard" @click="setAge(info.age)">
					<view class="title">
						年龄
					</view>
					<view class="infoBox">
						{{info.age}}
					</view>
					<u-picker :show="select.age" :columns="ageSelection" 
							  @confirm="confirmAge" @cancel="select.age = false" @close="select.age = false" 
							  :closeOnClickOverlay="true"></u-picker>
				</view>
				<view class="infoCard" @click="setSchool(info.school)">
					<view class="title">
						学校
					</view>
					<view class="infoBox">
						{{info.school}}
					</view>
					<u-picker :show="select.school" 
							  :columns="schoolList" 
							  @confirm="confirmSchool" @cancel="select.school = false" @close="select.school = false"
							  :closeOnClickOverlay="true"></u-picker>
				</view>
				<view class="infoCard" @click="setMajor(info.major)">
					<view class="title">
						专业
					</view>
					<view class="infoBox">
						{{info.major}}
					</view>
					<u-picker :show="select.major" 
							  :columns="majorList" 
							  @confirm="confirmMajor" @cancel="select.major = false" @close="select.major = false"
							  :closeOnClickOverlay="true"></u-picker>
				</view>
				<!--待加：点击遮罩层关闭-->
				<!--
				<view class="infoCard" @click="popupControl.blog = true">
					<view class="title">
						博客
					</view>
					<view class="infoBox">
						{{info.blogUrl}}
					</view>
					<u-popup :duration="200" :show="popupControl.blog" mode="center"  @close="popupControl.blog = false" @open="open">
						
					</u-popup>
				</view>
				-->
			</view>
			
			<view class="part2">
				<view class="infoCard" @click="openTags">
					<view class="title">
						个性标签
					</view>
					<view class="infoBox" 
						  style="display: flex; align-items: flex-start; flex-direction: row; flex-wrap: wrap;
								 right: calc(-50% + 2 * 25upx);">
						<uni-tag class="Tags" v-for="(item, index) in myTags" :key="index" :text="item" :inverted="true" type="warning" size="mini"></uni-tag>
					</view>
					
					<u-popup :round="30" :duration="200"
						:show="popupControl.tags" mode="center"  
						@close="popupControl.tags = false" :closeOnClickOverlay="true" @cancel="popupControl.tags = false">
						
						<view class="baseCardStyle changeTags" style="height: 1000upx; width: 600upx;">
							<view class="guide">
								修改标签
							</view>
								
							<view class="tagsArea">
								<view class="myTags">   
									<view class="my">
										我的标签
									</view>
									<view class="showMyTags">
										<u-tag class="tags" v-for="(item, index) in myTags" :key="index" 
											   :text="item" :plain="!item" type="success" :name="index"
											   @click="cancelMyTag(item)">
										</u-tag>
									</view>
								</view>
								
								<view class="allTags">
									<view class="all">
										所有标签
									</view>
									<view class="showAllTags">
										<u-tag class="tags" v-for="(item, index) in systemTagList" :key="index"
											   :text="item.tagName" :plain="!item.isChoose" type="success" :name="index"
											   @click="chooseTag(item)">
										</u-tag>
									</view>
								</view>
							</view>	
								
								
							<view class="control">
								<view class="cancel" @click="cancelTags()">取消</view>
								<view class="update" @click="updateTags()">保存并退出</view>
							</view>
						</view>
					</u-popup>
					
				</view>
				<view class="infoCard">
					<view class="title">
						关注量
					</view>
					<view class="infoBox" 
						  style="right: calc(-50% + 1 * 25upx);">
						{{info.concerCount}}
					</view>
				</view>
				<view class="infoCard">
					<view class="title">
						粉丝量
					</view>
					<view class="infoBox" style="right: calc(-50% + 1 * 25upx);">
						<span>{{info.fansCount}}</span>
						<!-- {{info.fansCount}} -->
					</view>
				</view>
			</view>
			
			<view class="keep" @click="keepChange">
				保存
			</view>
		
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				info:{},
				newNickname:"",
				newIntro:"",
				newAvatar:'',
				oldAvatar:'',
			    myTags:new Set(),
				systemTagList:[
					{
						id: 1,
						tagName: 'java',
						isChoose: false
					},
					{
						id: 2,
						tagName: 'go',
						isChoose: false,
					},
					{
						id: 3,
						tagName: '后端',
						isChoose: false,
					},
					{
						id: 4,
						tagName: '前端',
						isChoose: false,
					},
					{
						id: 10,
						tagName:'JavaScript',
						isChoose:false
					},
					{
						id: 11,
						tagName: 'C++',
						isChoose:false
					},
					{
						id: 12,
						tagName: 'C#',
						isChoose:false
					}
					// {
					// 	id: 4,
					// 	name: '算法',
					// 	isChoose: false,
					// },
					// {
					// 	id: 5,
					// 	name: 'Java',
					// 	isChoose: false,
					// },
					// {
					// 	id: 6,
					// 	name: 'JavaScript',
					// 	isChoose: false,
					// },
					// {
					// 	id: 7,
					// 	name: 'C++',
					// 	isChoose: false,
					// },
					// {
					// 	id: 8,
					// 	name: 'C#',
					// 	isChoose: false,
					// },
					// {
					// 	id: 9,
					// 	name: '游戏',
					// 	isChoose: false,
					// },
					// {
					// 	id: 10,
					// 	name: '动漫',
					// 	isChoose: false,
					// },
					// {
					// 	id: 11,
					// 	name: '电影',
					// 	isChoose: false,
					// },
					// {
					// 	id: 12,
					// 	name: '贴吧黄牌',
					// 	isChoose: false,
					// },
				],
				isChange: false,
				containerHeight: undefined,
				containerWidth: undefined,
				ageSelection:[Array.from(Array(100).keys(), n=>n+1)],
				//来个hero
				schoolList: [['四川大学','电子科技大学','西南交通大学','西南财经大学','西南石油大学', '成都理工大学']], //等一个hero爬高校列表
				majorList:[['软件工程','计算机科学与技术','大数据','网络安全','物联网工程']],
				select:{
					sex:false,
					age:false,
					school:false,
					major:false,
				},
				popupControl:{
					nickname:false,
					intro:false,
					blog:false,
					tags: false
				}
			}
		},
		methods:{
			init(){
				uni.getSystemInfo({
					success: (res) => {
						this.containerHeight = res.screenHeight
					}
				})
			},
			updateAvatar(){
				uni.chooseImage({
					count:1,
					sizeType:['original','compressed'],
					sourceType:['album'],
					success:(img) => {
						//console.log(img.tempFilePaths[0].toString())
						//console.log(img.tempFilePaths[0])
						//this.render.upload(img.tempFiles[0])
						//console.log('filePath: ', img.tempFilePaths[0])
						uni.uploadFile({
							url: 'http://162.14.102.246:8090/user/file/upload',
							filePath: img.tempFilePaths[0],
							name: 'file',
							header:{
								xdzn_token:this.myToken,
								'Content-Type':'multipart/form-data'
							},
							success: (res)=>{
								let data = JSON.parse(res.data)
								//console.log(data)
								if(data.code == 200){
									//console.log(data.data.url)
									this.newAvatar = data.data.url
								}
							}
						})
					}
				})
			},
			setSex(){
				if(this.select.sex == false){
					this.select.sex = true
				}
			},
			setAge(){
				if(this.select.age == false){
					this.select.age = true
				}
			},
			setSchool(){
				if(this.select.school == false){
					this.select.school = true
				}
			},
			setMajor(){
				if(this.select.major == false){
					this.select.major = true
				}
			},
			confirmSex(e){
				this.info.sex = e.value[0]
				this.select.sex = false
			},
			confirmAge(e){
				this.info.age = e.value[0]
				this.select.age = false
			},
			confirmSchool(e){
				this.info.school = e.value[0]
				this.select.school = false
			},
			confirmMajor(e){
				this.info.major = e.value[0]
				this.select.major = false
			},
			cancelNickname(){
				this.newNickname = ""
				this.popupControl.nickname = false
			},
			updateNickname(){
				this.info.nickname = this.newNickname
				this.newNickname = ""
				this.popupControl.nickname = false
			},
			cancelIntro(){
				this.newIntro = this.info.introduce
				this.popupControl.intro = false
			},
			updateIntro(){
				this.info.introduce = this.newIntro
				this.newIntro= ""
				this.popupControl.intro= false
			},
			openTags(){
				//待优化
				this.systemTagList.forEach((item) => {
					this.myTags.forEach((s) => {
						if(item.tagName == s){
							item.isChoose = true
						}
					})
				})
				this.popupControl.tags = true
			},
			cancelTags(){
				this.newTags = []
				this.popupControl.tags = false
			},
			updateTags(){
				let newTags = []
				this.myTags.forEach((item) => {
					newTags.push(this.systemTagList.find(obj => obj.tagName == item).id)
				})
				this.info.tagUpdateList = newTags
				console.log(this.info.tagUpdateList)
				this.popupControl.tags = false
			},
			chooseTag(tag){
				tag.isChoose = !tag.isChoose
				if(tag.isChoose == true){
					this.myTags.add(this.systemTagList.find(object => object.tagName == tag.tagName).tagName)
				}else{
					this.myTags.delete(tag.tagName)
				}
				this.systemTagList.find(object => object.name == tag.name).isChoose == tag.isChoose
				//console.log(this.myTags)
			},
			cancelMyTag(tagName){
				this.systemTagList.find(obj => obj.tagName == tagName).isChoose = false
				this.myTags.delete(tagName)
				//this.systemTagList.find(object => object.name == tag.name).isChoose == tag.isChoose
			},
			keepChange(){
				//console.log(this.info)
				//info.tagList = Array.from(this.myTags)
				// this.$http.post('/user/front/updateInfo', this.info)
				// .then(res => {
				// 	console.log(res)
				// })
				this.info['tagList', []]
				if(this.newAvatar != ''){
					this.info.avatar = this.newAvatar
				}
				console.log(this.info)
				uni.request({
					url:'http://162.14.102.246:8090/user/front/updateInfo',
					method:'POST',
					header:{
						xdzn_token:this.$store.state.loginUser.token
					},
					data:this.info
				}).then(res => {
					console.log(res)
					if(res.data.code == 200){
						uni.showToast({
							icon:'success',
							title:'信息修改成功',
							duration:1200
						})
						
						this.$store.state.loginUser.userBaseInfo.nickname = this.info.nickname
						this.$store.state.loginUser.userBaseInfo.avatar = this.info.avatar
						this.$store.state.loginUser.userBaseInfo.background = this.info.background
						this.$store.state.loginUser.userBaseInfo.tagList = [...this.myTags]
						this.$store.state.loginUser.userBaseInfo.introduce = this.info.introduce
						this.$store.state.loginUser.userBaseInfo.ownInfo.age = this.info.age
						this.$store.state.loginUser.userBaseInfo.ownInfo.sex = this.info.sex
						this.$store.state.loginUser.userBaseInfo.ownInfo.school = this.info.school
						this.$store.state.loginUser.userBaseInfo.ownInfo.major = this.info.major
						console.log('修改后的tagList',this.$store.state.loginUser.userBaseInfo.avatar)
					}
				})
			}
		},
		onLoad(options) {
			this.info = JSON.parse(decodeURIComponent(options.info))
			//console.log(this.info)
			if(this.info.introduce == null){
				this.info.introduce = ''
			}
			this.init()
			this.newIntro = this.info.introduce
			//console.log(typeof(this.info.tagUpdateList) this.info.tagUpdateList)
			this.info.tagUpdateList.forEach((item) => {
				this.myTags.add(item)
			})
			console.log(this.info.avatar)
			this.oldAvatar = this.newAvatar = this.info.avatar
			console.log(this.myTags)
		}
	}
</script>

<style scoped>
	.container{
		background-color: rgba(220,220,220,0.500);
		width: 100%;
		height: 100%;
		position: relative;
	}
	.mainPart{
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.part1{
		width: 100%;
		background-color: white;
		padding-left: 30upx;
		padding-right: 30upx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.avatarCard{
		width: calc(100% - 60upx);
		height: 130upx;
		border-bottom: 2upx solid #e6e6e6;
		padding-top: 16upx;
		padding-bottom: 16upx;
		display: flex;
		align-items: center;
	}
	.infoCard{
		width: calc(100% - 60upx);
		height: 10%;
		border-bottom: 2upx solid #e6e6e6;
		padding-top: 30upx;
		padding-bottom: 30upx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.title{
		float: left;
		margin: auto 0;
		font-size: 25upx;
	}
	.infoBox{
		position: relative;
		text-align: right;
		right: -50%;
		width: 300upx;
		font-size: 0.8rem;
		color: rgba(113, 113, 113, 1.0);
	}
	.infoBox>span{
		text-align: right;
	}
	.avatar{
		position: relative;
		left: 70%;
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
		border: 3upx solid ghostwhite;
		box-shadow: 2upx 4upx 10upx rgba(220,220,220,0.240);
		overflow: hidden;
		background-color: rgba(220,220,220,0.440);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.headImg{
		width: 100upx;
		height: 100upx;
		background-size: cover;
	}
	.part2{
		margin-top: 30upx;
		width: 100%;
		background-color: white;
		padding-left: 30upx;
		padding-right: 30upx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	::v-deep .Tags{
		display: inline-block;
		border-radius: 2rpx;
		margin-right: 4rpx;
		margin-bottom: 10upx;
	}
	.guide{
		position: absolute;
		top: 10upx;
		font-size: 1.3rem;
		font-weight: bold;
		color: black;
	}
	.baseCardStyle{
		position: relative;
		width: 500upx;
		border-radius: 20upx;
		display: flex;
		align-items: center;
		flex-direction: column;
		background-color: white;
	}
	input{
		position: relative;
		top: 170upx;
		width: 400upx;
		height: 100upx;
		border-radius: 20upx;
		border: 3upx solid rgba(220,220,220,0.300);
		background-color: rgba(208, 208, 208, 0.2);
		padding-left: 12upx;
		
	}
	.control{
		position: absolute;
		bottom: 15upx;
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.cancel, .update{
		width: 50%;
		height: 50upx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 1rem;
		letter-spacing: 0.2rem;
		font-weight: bold;
	}
	.cancel{
		color: gray;
	}
	.update{
		color: deepskyblue;
		border-left: 2upx solid rgba(220,220,220,0.430);
	}
	::v-deep .introArea{
		position: absolute;
		top: 50upx;
		min-height: 200upx;
		width: 400upx;
		display: flex;
		margin-top: 60upx;
		padding-bottom: 50upx;
	}
	.changeTags{
		display: flex;
		flex-direction: column;
		/* align-items: flex-start; */
		padding-left: 30upx;
		padding-right: 30upx;
	}
	.tagsArea{
		position: relative;
		top: 90upx;
	}
	.my, .all{
		position: relative;
		width: 600upx;
		border-bottom: 2upx solid rgba(189, 189, 189, 0.3);
	}
	.myTags, .allTags{
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	.showMyTags, .showAllTags{
		padding-top: 20upx;
		width: 95%;
		margin-left: calc(5%);
		height: 350upx;
		display: flex;
		justify-content: flex-start;
		align-items: baseline;
		flex-direction: row;
		flex-wrap: wrap;
		align-content: flex-start;
	}
	.showAllTags{
	}
	::v-deep .tags{
		position: relative;
		/* margin-left: 20upx; */
		margin-right: 20upx;
		margin-bottom: 20upx;
	}
	.keep{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60%;
		height: 80upx;
		background-color: skyblue;
		color: white;
		border-radius: 10upx;
		margin-top: 100upx;
		letter-spacing: 4upx;
	}
</style>